<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Echarts</title>
    <meta charset="UTF-8">
    <title>人数趋势图</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <style>
        div{float: left;  white-space: nowrap;}
    </style>
</head>
<body>

<div id="main" style="width:100%; height: 60%;"></div>

<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));

    // 显示标题，图例和空的坐标轴
    var option = {
        color: ["#00FFFF", "#FF7F50"],
        title: {
            text: '各学期男女人数前十的班级',
            left: 'center'

        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['男', '女']
        },
        xAxis: {
            name: "学期,班级",
            type: 'category',
            data: [],
            axisLabel: {
                textStyle: {
                    fontStyle: 'italic' // 将字体设置为斜体
                },
                rotate: -45
            }
        },
        yAxis: {
            name: "人数"
        },
        series: [{
            name: '男',
            type: 'bar',
            data: [],
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'black',
                            fontSize: 16
                        }
                    }
                }
            }
        },
            {
                name: '女',
                type: 'bar',
                data: [],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: 'black',
                                fontSize: 16
                            }
                        }
                    }
                }
            }]
    };

    myChart.showLoading();

    $.ajax({
        type: "get",
        async: true,
        url: "/bigdataPro/kqInfo",
        dataType: "json",
        success: function (data) {

            if (data && data.code === 'success') {
                var obj = eval(data.items);
  console.log("data");
                var classsem = [];
                var boy = [];
                var girl = [];

                for (var i = 0; i < obj.length; i++) {
                    classsem.push(obj[i].names);
                    boy.push(obj[i].value1);
                    girl.push(obj[i].value2);
                }

                myChart.setOption({
                    xAxis: {

                        data: classsem,

                    },
                    series: [{
                        name: '男',
                        data: boy
                    }, {
                        name: '女',
                        data: girl
                    }]
                });


            } else {
                alert("后台数据获取失败!");
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            console.error("请求失败：", xhr, textStatus, errorThrown);
            alert("图表请求数据失败!");
        }
    });

    myChart.setOption(option);
    myChart.hideLoading();
</script>
<botton onclick="window.location.href='index2.jsp'">跳转到第二页面</botton>
</body>
</html>
